﻿@font-face {
    font-family: 'COM4tFineRegular';
    src: url('../fonts/com4f_rg-webfont.eot');
    src: url('../fonts/com4f_rg-webfont.eot?#iefix') format('eot'),
         url('../fonts/com4f_rg-webfont.woff') format('woff'),
         url('../fonts/com4f_rg-webfont.ttf') format('truetype'),
         url('../fonts/com4f_rg-webfont.svg#webfontbKvpfIVG') format('svg');
    font-weight: normal;
    font-style: normal;

}


body, ul, li, h1, h2, span
{
    font-family: 'COM4tFineRegular', Arial, Sans-Serif;
	margin:0;
	padding:0;
	
     /* 0 (Push shadow down 2px), (10px worth of blur), (Spread of 1px), black*/
     -webkit-text-shadow: 0 2px 9px rgba(204,204,204,.2);
     -moz-text-shadow: 0 2px 9px rgba(0,0,0,.2);
     text-shadow: 0 2px 9px rgba(0,0,0,.2);	
}

a
{
    text-decoration:none;
}

ul
{
	list-style:none;
}

body
{
	background:#292929 url(../img/tew-bg.jpg) no-repeat;
	height:100%;
	width:100%;
}

#header
{
    position:absolute;
    top: 50px;
    left: 100px;
	font-size:52px;
	text-transform:uppercase;
	text-decoration: none;
	color: #FFF;
	height: 52px;
	line-height: 66px;
}

#header h1
{
    z-index:200;
}

#header h1#second
{
    margin-left:40px;
    margin-top:10px;
    color:#FFF;
    z-index:0;
}

.slidingMenu 
{
	position: absolute;
	height:600px;
	width: 500px;
	top:250px;
    overflow:hidden;
	right:1px;
}

.slidingMenu li 
{
	display:block;
	float:right;
	clear:both;
	position:relative;
	overflow:hidden;
}

.slidingMenu li.move 
{
	width: 9px;
	height: 68px;
	right:0px;
	padding-right:10px;
	margin-top:-2px;
	z-index: 8;
	position: absolute;    
	background: #2c0927;     
	background: 
		-webkit-gradient(
			linear, 
			left top, 
			left bottom, 
			from(#371231),
			to(#2c0927)
		);   
	background: 
		-moz-linear-gradient(
			top, 
			#371231, 
			#2c0927
		);     
	background: 
		linear-gradient(
			top, 
			#371231, 
			#2c0927
		);     		
	-moz-border-radius: 8px 0px 0px 8px;  
	-webkit-border-top-left-radius: 8px;     	
	-webkit-border-bottom-left-radius: 8px; 
	border-top-left-radius: 8px;  
	border-bottom-left-radius: 8px;        
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;	
}

.slidingMenu li.moveOther
{
	width: 9px;
	height: 68px;
	right:0px;
	padding-right:10px;
	margin-top:0px;
	z-index: 8;
	position: absolute;    
	background: #2c0927;     
	background: 
		-webkit-gradient(
			linear, 
			left top, 
			left bottom, 
			from(#371231),
			to(#2c0927)
		);   
	background: 
		-moz-linear-gradient(
			top, 
			#371231, 
			#2c0927
		);     
	background: 
		linear-gradient(
			top, 
			#371231, 
			#2c0927
		);     		
	-moz-border-radius: 8px 0px 0px 8px;  
	-webkit-border-top-left-radius: 8px;     	
	-webkit-border-bottom-left-radius: 8px; 
	border-top-left-radius: 8px;  
	border-bottom-left-radius: 8px;        
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;	
}

.slidingMenu li a 
{
	font-size:66px;
	text-transform:uppercase;
	text-decoration: none;
	color: #FFF;
	outline: none;
	text-indent:5px;
	z-index: 10;
	display: block;
	float: right;
	height: 66px;
	line-height: 66px;
	position: relative;
	overflow: hidden;
	padding-right:10px;
}

/* Descriptions */
.slidingMenuDesc
{
	margin-top:40px;
	position:relative;
}

.slidingMenuDesc div
{
	background: #2c0927;     
	background: 
		-webkit-gradient(
			linear, 
			left top, 
			left bottom, 
			from(#371231),
			to(#2c0927)
		);   
	background: 
		-moz-linear-gradient(
			top, 
			#371231, 
			#2c0927
		); 
	background: 
		linear-gradient(
			top, 
			#371231, 
			#2c0927
		); 		  	
	height: 68px;
	padding-right:5px;
	left:-5px;
	width:0px;
	margin-top:2px;
	overflow:hidden;
	position:absolute;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	-moz-border-radius: 0px 8px 8px 0px;  
	-webkit-border-top-right-radius: 8px;     	
	-webkit-border-bottom-right-radius: 8px; 
	border-top-right-radius: 8px;  
	border-bottom-right-radius: 8px; 
}

.slidingMenuDesc div span 
{
	font-size:24px;
	color: #f0f0f0;
	text-indent:5px;
	text-transform:uppercase;
	z-index: 10;
	display: block;
	height: 66px;
	line-height: 66px;
	position:absolute;
	right:10px;
	margin-top:5px;
	margin-left:5px;
	top:-3px;
}

/*******************
----WEDDING INF0----
********************/

.beforeDiv 
{
    background: #777; 
	background: 
		-webkit-gradient(
			linear, 
			left top, 
			left bottom, 
			from(#777),
			to(#666)
		);  
	background: 
		-moz-linear-gradient(
			top, 
			#777, 
			#666
		); 			
	background: 
		linear-gradient(
			top, 
			#777, 
			#666
		); 				
    border:1px solid #999;
    
     /** Moz & Webkit Vendor Prefixes
    -webkit-border-bottom-left-radius: 25px 25px;  
    -moz-border-radius-bottomleft: 25px 25px;  
     **/
    /*-moz-border-radius-topright: 25px 25px;*/
     
     /* 0 (Push shadow down 2px), (10px worth of blur), (Spread of 1px), black*/
     -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 2px 10px rgba(0,0,0,.2);
     box-shadow: 0 2px 10px rgba(0,0,0,.2);     
}

#containerOne
{
    position:relative;
    left: 104px;
    top: 250px;
}

#containerTwo
{
    position:absolute;
    top: 250px;
    left: 2000px;
}

fieldset img
{
    margin-left: -22px;
}

    .weddingInfo 
    {
        border: 1px solid #888;
        min-height: 325px;
        width: 650px;
        position: relative;
        padding: 5px 10px;   
    }

    .weddingInfo fieldset
    {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding-bottom: 10px;
    }

    .weddingInfo legend
    {
        color: #FFF;
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 10px;
    }

    .weddingInfo ul
    {
        margin-left: 20px;
    }
    
    .weddingInfo h3
    {
        color: #4a2546;
        margin-top: 5px;
        padding-bottom: 0px;
    }
    
    .weddingInfo span
    {
        font-size: 18px;
        display: block;
        color: #FFF; 
        font-weight: bold;
    }

.beforeHeader
{
   border: 1px solid #3131c8;
   z-index: 0;
}


.sectionHeader
{
    background: #4a2546;
	background: 
		-webkit-gradient(
			linear, 
			left top, 
			left bottom, 
			from(#4a2546), 
			to(#371231)
		);     
	background: 
		-moz-linear-gradient(
			top, 
			#4a2546, 
			#371231
		);   	
	background: 
		linear-gradient(
			top, 
			#4a2546, 
			#371231
		); 				
    border-top: 1px solid #4d2641;
    border-left: 1px solid #4d2641;
    border-right: 1px solid #4d2641;
    position:relative;
    padding: 5px 0 5px 10px;
    width: 660px;
    -webkit-border-top-right-radius: 25px 25px;
}

    .sectionHeader h1
    {
        color:#f0f0f0;
        text-transform: uppercase;
    }
    
    .sectionHeader button
    {
     background:#525a5d url(../img/btNavSlice.png) repeat-x;
     background: 
		-webkit-gradient(
			linear, 
			left top, 
			left bottom, 
			from(#525a5d), 
			to(#1c1f1f)
		);     
	background: 
		-moz-linear-gradient(
			top, 
			#525a5d, 
			#1c1f1f
		);   	
	background: 
		linear-gradient(
			top, 
			#525a5d, 
			#1c1f1f
		); 
		
    border: 1px solid #222;
    
    color: #FFF;  
		
	height: 29px;
	width: 80px;
	
	margin-top: 3px;
	margin-right: 35px;
		
	-moz-box-shadow:1px 1px 3px #000;
	-webkit-box-shadow:1px 1px 3px #000;
	box-shadow:1px 1px 3px #000;
	
	-moz-border-radius: 5px 5px 5px 5px;  
	-webkit-border-radius: 5px 5px 5px 5px;
	/*
	-webkit-border-top-right-radius: 8px;     	
	-webkit-border-bottom-right-radius: 8px; 
	border-top-right-radius: 8px;  
	border-bottom-right-radius: 8px; 
	*/
    }
    
    .sectionHeader button:hover
    {
        cursor: pointer;
        background: #4a4f54; 
	    background: 
		    -webkit-gradient(
			    linear, 
			    left top, 
			    left bottom, 
			    from(#53585e), 
			    to(#4a4f54)
		    );     
	    background: 
		    -moz-linear-gradient(
			    top, 
			    #53585e, 
			    #4a4f54
		    );   	
	    background: 
		    linear-gradient(
			    top, 
			    #53585e, 
			    #4a4f54
		    );         
    }
    
    .sectionHeader button:active
    {
        margin-top: 2px;
        background:#313435 url(../img/btNavSlice.png) repeat-x;
        background: 
		    -webkit-gradient(
			    linear, 
			    left top, 
			    left bottom, 
			    from(#313435), 
			    to(#262829)
		    );     
	    background: 
		    -moz-linear-gradient(
			    top, 
			    #313435, 
			    #262829
		    );   	
	    background: 
		    linear-gradient(
			    top, 
			    #313435, 
			    #262829
		    );      
		 color: #CCC;   
    }
    
    .sectionHeader a button
    {
        float: right;
        padding: 4px;
        
    }
    
.sectionInfo
{
    color: #FFF;
}

.sectionInfo img
{
    border: none;
}

.sectionInfo h3
{
    display: inline;
}

.sectionInfo li
{
    margin-bottom: 4px;
}

.sectionInfo .how
{
    float: left;
    max-width: 450px;
    padding-right: 18px;
}

.sectionInfo blockquote .how
{
    float: right;
}

#bridesMembers > div p
{
    padding-right:5px;
}

#bridesMembers img, #groomsMembers img
{
    position: relative;
    float: left;
    padding: 10px;
}


/*****
 MAPS
******/

#dialogMap
{
    width:500px;
}

#dialogMap a
{
    padding-bottom: 10px;
}

        .googleMap
        {
            background: #FFF;
            border: 1px solid #CCC;
            width: 400px;
            height: 300px;
            position:relative;
            float:right;
            margin-top: 10px;
        }

#controls  
{
    position: relative; 
    float:left; 
    bottom: 50px; 
    right: 30px; 
}

.icon 
{
     float:left; 
     position:absolute; 
     cursor:pointer; 
     cursor:hand; 
     padding:3px; 
}

#ceremonyMap, #receptionMap
{
    text-decoration: underline;
}

/*******************
  WEDDING PARTY TABS
 *******************/
        
/* Initially hide all uls except the first one*/
.js .sectionInfo > div:not(:first-child)
{
    display:none;
}
 
 .members
 {
    clear: both;
    list-style-type: none;
    *margin-bottom:-10px;
    padding: 0;
    display: block !important;
 }
 

     .members li
     {
         float: left;
         background:#525a5d;
         background: 
		    -webkit-gradient(
			    linear, 
			    left top, 
			    left bottom, 
			    from(#525a5d), 
			    to(#1c1f1f)
		    );     
	    background: 
		    -moz-linear-gradient(
			    top, 
			    #525a5d, 
			    #1c1f1f
		    );   	
	    background: 
		    linear-gradient(
			    top, 
			    #525a5d, 
			    #1c1f1f
		    ); 
		background: 
		    -ms-linear-gradient(
		        top left, 
		        #525A5D 0%, 
		        #1C1F1F 100%
		   );    
        border: 1px solid #222;
	    border-bottom:none;
	    color: #FFF;
	    display:block; 
	    font-size:13.25px; 
	    margin-right:-1px;
	    outline:none; 
	    height: 32px;
        padding:4px 22px;
	    position:relative; 
	    text-align: center;
        text-decoration: none;	    
     }
     
     .groomsFix li
     {
         padding:4px 24px;
     }
     
     
    .members li.selected, .members li:hover
    {
        cursor: pointer;
        
        background: #4a2546;
	    background: 
		    -webkit-gradient(
			    linear, 
			    left top, 
			    left bottom, 
			    from(#4a2546), 
			    to(#371231)
		    );     
	    background: 
		    -moz-linear-gradient(
			    top, 
			    #4a2546, 
			    #371231
		    );   	
	    background: 
		    linear-gradient(
			    top, 
			    #4a2546, 
			    #371231
		    ); 				
        border-top: 1px solid #4d2641;
        border-left: 1px solid #4d2641;
        border-right: 1px solid #4d2641;        
    }  
    
    .members li:active
    {
	background: #2c0927;     
	background: 
		-webkit-gradient(
			linear, 
			left top, 
			left bottom, 
			from(#371231),
			to(#2c0927)
		);   
	background: 
		-moz-linear-gradient(
			top, 
			#371231, 
			#2c0927
		);     
	background: 
		linear-gradient(
			top, 
			#371231, 
			#2c0927
		); 
		color:#EEE;        
    }
     
/*Dynamic image selector from js file */
#largeImage
{
    background: #e3e3e3;
    border: 1px solid #BFBFBF;
    /*padding: .5em;*/
    position:absolute;
}

/***********************
      PHOTOS
 ***********************/

.view
{
    /* border: 1px solid #444; */
    width: 607px;
    height: 250px;
    margin: 0 auto 20px;
    padding: 1px;
    overflow: hidden;
    position: relative;
}

.content-conveyor
{
    width: 610px;
    position: relative;
}

.item
{
    width: 304px;
    float: left;
    text-align: center;
}

    .item img
    {
        padding: 1px;
        border: none;
    }
    
 #slider
 {
     width: 550px;
     margin: 0 auto 20px;
     margin-top: 15px;
     background-color: #888;
 }
 
 #sliderContent
 {
     margin-top: 40px;
 }
 
 #instructions
 {
     color: #FFF;
     margin-left: 80px
 }
 
    #instructions span
    {
        color: #4a2546;
        display: inline;
        font-weight: normal;
    }
 
 /******************
     REGISTRIES
 *******************/
 
 #registries
 {
     margin-top: 20px;
 }
 
 #registries img
 {
     border: none;
     padding: 5px;
     margin-left: 170px;
 }
 
 
.wrap
{
    height:85px;
    width:443px;
    position:relative;
    /*Clip off the sliding effect*/
    overflow:hidden;
    float:left;
    padding: 0 1em;
}

#kyanContainer img
{    
    position:absolute;
    top:0;
    left:0;
}
 
 
 /*******************
       OUR STORY
  *******************/
 #ourStoryOne img,  #ourStoryTwo img
 {
     float: right;
     height: 200px;
     width: 300px;
     padding: 8px;
 }
 
 #ourStoryTwo img
 {
     float: left;
     padding-right: 15px;
 }
 
 